<template>
    <div class="musicDetail">
        <img :src="musicList.al.picUrl" class="bgimg"/>
        <div class="detailTop">
            <div class="detailTopLeft">
                <svg class="icon" aria-hidden="true" @click="backHome">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <div class="nameList">
                    <Vue3Marquee style="color:#fff">{{musicList.name}}</Vue3Marquee>
                    <span v-for="item in musicList.ar" :key="item" class="peopleName">
                        {{item.name}}
                    </span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjiantou"></use>
                    </svg>
                </div>
            </div>
            <div class="detailTopRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
            </div>
        </div>
        <div class="detailContent" v-show="!isLyricShow">
            <img src="@/assets/needle-ab.png" alt="" class="img_need" :class="{img_need_active:!isbtnShow}">
            <img src="@/assets/cd.png" alt="" class="img_cd">
            <img :src="musicList.al.picUrl" alt="" class="img_ar" :class="isbtnShow?'img_ar_paused':'img_ar_active'" @click="isLyricShow=true">
        </div>
        <div class="musicLylic" ref="musicLyric" v-show="isLyricShow" @click="isLyricShow=false">
            <p v-for="item in lyric" :key="item" :class="{active:(currentTime*1000>=item.time&&currentTime*1000<item.pre)}">
                {{item.lrc}}
            </p>
        </div>
        <div class="detailFooter">
            <div class="footerTop">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-aixin"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-heijiaochangpian"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao-"></use>
                </svg>
            </div>
            <div class="footerContent">
                <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
            </div>
            <div class="footer">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xunhuan"></use>
                </svg>
                <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
                    <use xlink:href="#icon-shangyishoushangyige"></use>
                </svg>
                <svg class="icon iconCenter" aria-hidden="true" v-if="isbtnShow" @click="play">
                    <use xlink:href="#icon-bofang1"></use>
                </svg>
                <svg class="icon iconCenter" aria-hidden="true" v-else @click="play">
                    <use xlink:href="#icon-icon_zanting"></use>
                </svg>
                <svg class="icon" aria-hidden="true" @click="goPlay(1)">
                    <use xlink:href="#icon-xiayigexiayishou"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zu"></use>
                </svg>
            </div>
        </div>
    </div>
</template>
<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { mapMutations,mapState } from 'vuex';
export default {
    data(){
        return{
            isLyricShow:false
        }
    },
    computed:{
        ...mapState(["lyricList",'currentTime','playListIndex','playList','duration']),
        lyric:function(){
            let arr;
            if(this.lyricList.lyric){
                arr=this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item,i)=>{
                    let min=item.slice(item.indexOf('[')+1,item.indexOf(':'));
                    let sec=item.slice(item.indexOf(':')+1,item.indexOf('.'));
                    let mill=item.slice(item.indexOf('.')+1,item.indexOf(']'));
                    let time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill);
                    let lrc=item.slice(item.indexOf(']')+1,item.length);
                    // console.log(min,sec,mill,lrc);
                    return {min,sec,mill,lrc,time}
                })
                arr.forEach((item,i)=>{
                    if(i===arr.length-1||isNaN(arr[i+1].time)){
                        item.pre=100000;
                    }else{
                        item.pre=arr[i+1].time
                    }
                })
            }
            console.log(arr);
            return arr;
        }
    },
    mounted(){
        console.log(this.musicList);
        this.addDuration();
    },
    props:['musicList','play','isbtnShow','addDuration'],
    watch:{
        currentTime:function(newValue){
            let p=document.querySelector('p.active')
            // console.log(p.offsetTop);
            // console.log([this.$refs.musicLyric]);
            if(p&&p.offsetTop>300){
                this.$refs.musicLyric.scrollTop=p.offsetTop-300
            }
            if(newValue===this.duration){
                this.goPlay(1);
            }
        }
    },
    components: {
        Vue3Marquee,
    },
    methods:{
        backHome:function(){
            this.isLyricShow=false;
            this.updateDetailShow();
        },
        ...mapMutations(['updateDetailShow','updatePlayIndex']),
        goPlay:function(num){
            let index=this.playListIndex+num;
            if(index<0){
                index=this.playList.length-1;
            }else if(index==this.playList.length){
                index=0;
            }
            this.updatePlayIndex(index);
        }
    }
}
</script>
<style lang="less" scoped>
.musicDetail{
    .bgimg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        filter: blur(70px);
        
    }
    .detailTop{
        width: 100%;
        height: 1.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .2rem;
        .detailTopLeft{
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
            .icon{
                width: .5rem;
                height: .5rem;
                fill: #fff;
            }
            .nameList{
                width: 40%;
                margin-left: .2rem;
                .peopleName{
                    font-size: .24rem;
                    color: #666;
                }
                .icon{
                    width: .2rem;
                    height: .2rem;
                    fill: #666;
                }
            }

        }
        .detailTopRight{
            .icon{
                fill: #fff;
            }
        }
    }
    .detailContent{
        width: 100%;
        height: 9rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .img_need{
            width: 2rem;
            height: 3rem;
            position: absolute;
            left: 46%;
            transform-origin: 0 0;
            transform: rotate(-13deg);
            transition: all 2s;
        }
        .img_need_active{
            width: 2rem;
            height: 3rem;
            position: absolute;
            left: 46%;
            transform-origin: 0 0;
            transform: rotate(0deg);
            transition: all 2s;
        }
        .img_cd{
            width: 5rem;
            height: 5rem;
            position: absolute;
            bottom: 2.3rem;
            z-index: -1;
        }
        .img_ar{
            width: 3.2rem;
            height: 3.2rem;
            border-radius: 50%;
            position: absolute;
            bottom: 3.14rem;
            animation: rotate_ar 10s linear infinite;
        }
        .img_ar_active{
            animation-play-state: running;
        }
        .img_ar_paused{
            animation-play-state: paused;
        }
        @keyframes rotate_ar{
            0%{
                transform:rotateZ(0deg);
            }
            100%{
                transform:rotateZ(360deg);
            }
        }
    }
    .musicLylic{
        width: 100%;
        height: 8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        overflow: scroll;
        scroll-behavior: smooth;
        p{
            color: #555;
            margin-bottom: .4rem;
        }
        .active{
            color: #fff;
            font-size: .4rem;
        }
    }
    .detailFooter{
        width: 100%;
        height: 3rem;
        position: absolute;
        bottom: 0.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .footerTop{
            width: 100%;
            height: 1rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .icon{
                width: .6rem;
                height: .6rem;
                fill: rgb(245, 234, 234);
            }
        }
        .footerContent{
            .range{
                width: 100%;
                height: .06rem;
            }
        }
        .footer{
            width: 100%;
            height: 1rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .icon{
                width: .5rem;
                height: .5rem;
                fill: rgb(245, 234, 234);
            }
            .iconCenter{
                width: .8rem;
                height: .8rem;
            }
        }
    }
}
</style>